<template>
    <BPTable ref='tableRef' align='center' row-key='id' :columns='columns' :api='page' :buttons='buttons' :rowSelection="true" @selectionChange="selectionChange">

        <template #connectStatus="{record}">
            <a-tag v-if="record.connectStatus" :bordered="false" color="success">在线</a-tag>
            <a-tag v-else :bordered="false" color="error">离线</a-tag>
        </template>
        
        <template #enable='{record}'>
            <a-tag v-if='record.enable' color='#87d068'>{{$t('enable')}}</a-tag>
            <a-tag v-else>{{$t('disable')}}</a-tag>
        </template>
    </BPTable>
</template>

<script lang='ts' setup>
    import { ref } from "vue";
    import { pageApi } from '@/api/devices/Device'
    import { useI18nStore } from "@/store/i18n";
    import { queryMerchantApi } from '@/api/Merchant';


    const props = defineProps<{
        deviceTypeId:number
    }>()


    function page(params){
        return pageApi({deviceTypeId : props.deviceTypeId, ...params})
    }


    //多选操作
    const selectedKeys = ref<number[]>([])
    function selectionChange(keys:any[], rows:any[]) {
        selectedKeys.value = keys
    }



    const i18n = useI18nStore()
    const tableRef = ref()


    const buttons = ref<SearchButton[]>([])

    const columns = ref<Column[]>([
        {
            dataIndex : 'id',
            title : '设备号',
            inSearch : true,
            placeholder : '多个设备号用,分割'
        },

        {
            dataIndex : 'name',
            title : '名称',
            inSearch : true,
        },

        {
            dataIndex : 'deviceTypeId',
            title : '设备类型',
            customRender({record}) {
                return record.deviceType ? record.deviceType.name : ''
            }
        },

        {
            title : '状态',
            dataIndex : 'connectStatus',
            align : 'center',
            inSearch : true,
            type : 'select',
            options : [
                {value : 1, label : '在线'},
                {value : 0, label : '离线'}
            ]
        },

        {
            dataIndex : 'merchant',
            title : '商户',
            customRender({text}) {
                return text ? text.name : ''
            },
            inSearch : true,
            name : 'merchantId',
            type : 'fetchSelect',
            valueField : 'id',
            labelField : 'name',
            fetchApi : queryMerchantApi
        },
    ])

    defineExpose({
        select() {
            return selectedKeys.value
        }
    })

    
</script>